<template>
    <div style="display: flex;flex-direction: column;padding: 10px;height: 100%;
    box-sizing: border-box;">
      <div style="height: 380px;overflow-y: auto;">

        <div :class="[item.type == 0 ? 'msgdivleft' : 'msgdivright']" v-for="item in messageList">
          <span style="width: 40px;flex-shrink: 0;"><img v-if="item.type == 0" :src="item.headimg" style="width: 40px;height: 40px;border-radius: 50%;flex-shrink: 0;"></span>
          <span style="margin: 0 5px;font-size: 14px">
            {{item.message}}
          </span>
          <span style="width: 40px;flex-shrink: 0;"><img v-if="item.type == 1" :src="item.headimg" style="width: 40px;height: 40px;border-radius: 50%;flex-shrink: 0;"></span>
        </div>
        <div id="bottommsg">12</div>
      </div>
      <div style="display: flex;flex-direction: column;">
        <el-input type="textarea" v-model="message" :autosize="{ minRows: 4, maxRows: 8}"></el-input>
        <el-button type="primary" style="margin-top: 10px" @click="saveMessage">提交</el-button>
      </div>
    </div>
</template>
<script>
import C from '@/common/common.js'
export default {
  name: 'liveMessage',
  data () {
    return {
      message: '',
      messageList: '',
      hand: true
    }
  },
  methods: {
    saveMessage: async function () {
      if (!this.hand) return
      this.hand = false
      let res = await C.ajax(
        '/shop/admin/saveMessage',
        { message: this.message },
        'post'
      )
      if (res) {
        C.success(res.data.info)
        this.getMessage()
        this.message = ''
        this.hand = true
      }
    },
    async getMessage () {
      let data = await C.ajax('/shop/admin/getMessage')
      this.messageList = data
      this.$nextTick(function () {
        setTimeout(function () {
          document.getElementById('bottommsg').scrollIntoView(false)
        })
      })
    }
  },
  mounted: function () {
    this.getMessage()
  }
}
</script>

<style>
.msgdivleft {
  color: #000;
  display: flex;
  align-items: center;
  padding: 5px;
}

.msgdivright {
  color: #000;
  display: flex;
  align-items: center;
  padding: 5px;
  justify-content: flex-end;
}
</style>